<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户展示页</title>
	<script src='__PUBLIC__/Js/jquery.js'></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
	<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
	<script src="__PUBLIC__/Js/Jqui/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="__PUBLIC__/Js/jqui/jquery-ui.min.css">
	<script src="__PUBLIC__/Js/jqPaginator.js"></script>
	<style>
	*{margin:0;padding:0;}
	a{cursor:pointer;}
	.obody{width:1000px;margin:100px auto;}
	.pagediv{margin:-100px auto;width:600px;}
	.promote{width:70px;height:30px;border-radius:4px;border:1px;}
	#dialog-form{display:none;}
	</style>
</head>
<body>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~固定在头部的导航栏~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="navbar-header">
			 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand">用户展示</a>
		</div>
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="active">
					 <a>|</a>
				</li>						
			</ul>
			<form action="<{:U('Admin/User/index')}>" id='sfrm' method='post'  class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" id="stxt" class="form-control" name="search" placeholder="用户名查询" />
					<input type="hidden" class="shid" value='<{$sear}>'>
				</div> <input type="button" id="sbtn" class="btn btn-default" value="查询">
			</form>
		</div>
	</nav>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~展示的表格~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="obody"><table id="showtable" class="table table-hover"></table></div>
<div class="pagediv"><ul id="page" class="pagination"></ul></div>
<!-- ~~~~~~~~~~~~~~隐藏表单~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="dialog-form">
	<form class="v-edit">	
	<p>更改用户权限</p><br>
        <input type='radio' class='oido' id='oido_0' data-id='0' value='管理员' name='utype'>管理员
        <input type='radio' class='oido' id='oido_1' data-id='1' value='普通会员' name='utype' >普通会员
	</form> 
</div>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~js代码部分~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<script>
$(function(){
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function getLocalTime(nS) { 
    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17);
}
//无刷分页~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	$('#page').jqPaginator({
          totalPages: <{$show}>,
          visiblePages: 3,
          currentPage: 1,
          first: '<li class="prev"><a href="javascript:;">首页</a></li>',
          prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            last: '<li class="next"><a href="javascript:;">尾页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
          onPageChange: function (num,type) {
          	var sear = $('.shid').val();
          	var html="<thead><tr><th>"+'姓名'+"</th><th>"+'性别'+"</th><th>"+'邮箱'+"</th><th>"+'电话'+"</th><th>"+'注册时间'+"</th><th>"+'身份信息'+"</th><th>"+'操作'+"</th></tr></thead>";				
	          $.get("<{:U('Admin/User/doindex')}>",{p:num,sear:sear},function(data){
	          	$(data).map(function(k,v){
	             	html+="<tr ><td>"+v.uname+"</td><td class='sex' data-id='"+v.sex+"'>"+v.sex+"</td><td>"+v.email+"</td><td>"+v.tel+"</td><td>"+getLocalTime(v.mtime)+"</td><td class='type' id='type_"+v.uid+"' data-id='"+v.type+"'>"+v.type+"</td><td><input type='button' value='修改权限' class='promote' data-id='"+v.uid+"'></td></tr>";

	            });
	          	$('#showtable').html(html); 
	          	$('.sex[data-id=0]').text('女');
	          	$('.sex[data-id=1]').text('男');
	          	$('.type[data-id=0]').text('管理员');
	          	$('.type[data-id=1]').text('普通会员');
	          	
	            
	        },'json');
        }   
      })
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$(document).on('click','.promote',function(){
	var ids=parseInt($(this).attr('data-id'));	
	var tt=parseInt($('#type_'+ids).attr('data-id'));
	if(tt==0){
		$('#oido_0').prop('checked',true);
	}else{
		$('#oido_1').prop('checked',true);
	}
	$( "#dialog-form" ).dialog({
			title:'权限修改',
			height: 250,
			width: 250,
			modal: true,
			buttons: {
				修改: function(){
						var utype = parseInt($('.oido:checked').attr('data-id'));
						var stat=$('.oido:checked').val();
						$.post('<{:U("Admin/User/edittype")}>',{ids:ids,utype:utype},function(data){
							if(data.status){
								$('#type_'+ids).attr('data-id',utype);
								if(utype==1){
									$('#type_'+ids).text('普通会员');
								}else{
									$('#type_'+ids).text('管理员');
								}								
							}else{
								alert('修改失败');
							}										
						},'json');
				    	$(this).dialog( "close" );
				},
				取消: function(){
					$(this).dialog( "close" );
				}

			}

		});
});	
//搜索
$(document).on('click','#sbtn',function(){
	var sss = $('#stxt').val();
	console.log(sss);
	$('.shid').val();
	$('#sfrm').submit();
})


// <form action="<{:U('Admin/User/index')}>" id='sfrm' method='post'  class="navbar-form navbar-left" role="search">
// 				<div class="form-group">
// 					<input type="text" id="stxt" class="form-control" placeholder="用户名查询" />
// 				</div> <input type="button" id="sbtn" class="btn btn-default" value="查询">
// 			</form>
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
</script>
</body>
</html>